import React, { memo, useEffect, useState } from "react"
import { RightWrapper } from "./style"
import IconGlobal from "@/assets/svg/icon-global"
import IconMenu from "@/assets/svg/icon-menu"
import IconAvatar from "@/assets/svg/icon-avatar"
const HeaderRight = memo(() => {
    /** 定义组件内部的状态 */
    const [showPanel, setShowPanel] = useState(false)

    /** 副作用代码 */
    useEffect(() => {
        function windowHandleClick() {
            setShowPanel(false)
        }
        window.addEventListener("click", windowHandleClick)
        // 窗口失去焦点时隐藏菜单 f12中单击隐藏菜单效果
        window.addEventListener("blur", windowHandleClick)
        return () => {
            window.removeEventListener("click", windowHandleClick)
            window.removeEventListener("blur", windowHandleClick)
        }
    }, [])
    /** 事件处理函数 */
    function profileClickHandle(event) {
        // 阻止冒泡
        event.stopPropagation()
        setShowPanel(!showPanel)
    }

    return (
        <RightWrapper>
            <div className="btns">
                <span className="btn">登录</span>
                <span className="btn">注册</span>
                <span className="btn">
                    <IconGlobal />
                </span>
            </div>
            <div className="profile" onClick={profileClickHandle}>
                <IconMenu />
                <IconAvatar />
                {showPanel && (
                    <div className="panel">
                        <div className="top">
                            <div className="item register">注册</div>
                            <div className="item login">登录</div>
                        </div>
                        <div className="bottom">
                            <div className="item">出租房源</div>
                            <div className="item">开展体验</div>
                            <div className="item">帮助</div>
                        </div>
                    </div>
                )}
            </div>
        </RightWrapper>
    )
})

export default HeaderRight
